<style lang="less">
  .sign-off {
    .el-table .info-row {
      background: #FFAEB9;
    }
    .el-table .info-row-ageing {
      background: #FF6464;
    }
    .el-table .info-row-ageing-error {
      background: rebeccapurple;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #20a0ff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }

    .my {
      margin-left: -60px;
    }

    .f-w120 {
      width: 120%;
    }

    .el-table {
      flex: 1;
      .el-icon-check {
        display: none;
      }
      .current-row {
        .el-icon-check {
          display: inline-block;
        }
      }

    }

    .el-dialog {
      flex: 1;
      .isreceipt {
        display: none;
      }
      .receipt {
        display: inline-block;
      }
    }

    .backcolor {
      background-color: aqua
    }

    .f-w80 {
      position: absolute;
      margin-top: -6px;
      width: 80px;
    }
  }
  .special-delivery-top{
    background-color: red;
    margin-bottom: 5px;
    height: 35px;
    text-align: center;
    color: white;
    font-size: 18px;
    font-weight: 700;
    padding-top: 10px;
    .top-img{
      height: 30px;
      width: 30px;
      vertical-align: middle;
      padding-right: 10px;
    }
  }
</style>

<template>
  <div class="sign-off">
    <div id="special-delivery-top" class="special-delivery-top" v-bind:style="ageingDisplay">
      <img class="top-img" src="../../assets/warning.png"/>您有{{topWarningNum}}笔订单逾期未签收，请及时处理
    </div>
    <el-tabs v-model="SignOffTabs" @tab-click="tabClick">
      <el-tab-pane label="未到待签收" name="notSignOff">
          <search-bar more-display>
            <el-row>
              <el-col :span="8">
                <el-form-item label="订单编号">
                  <el-input v-model="noSignSearchCondition.LIKE_orderNumber" placeholder="请输入订单编号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货人">
                  <el-input v-model="noSignSearchCondition.LIKE_sendContactName" placeholder="请输入收货人名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收货人手机">
                  <el-input v-model="noSignSearchCondition.LIKE_sendContactPhone" placeholder="请输入收货人手机"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="订单日期">
                  <el-date-picker
                    v-model="noSignDaterange"
                    type="daterange"
                    placeholder="选择日期范围">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="结算方式">
                  <el-select v-model="noSignSearchCondition.EQ_paymentType" placeholder="请选择">
                    <el-option
                      v-for="item in $store.getters.PAY_WAY"
                      :label="item.cnDictValname"
                      :key="item.dictVal"
                      :value="item.dictVal">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="运输方式">
                  <el-select v-model="noSignSearchCondition.EQ_ageingType" placeholder="请选择">
                    <el-option
                      v-for="item in $store.getters.AGING_CLASSIFICATION"
                      :label="item.cnDictValname"
                      :key="item.dictVal"
                      :value="item.dictVal">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="16">
                <el-form-item>
                  <el-checkbox v-model="noSignCheckCondition.IsReceiptWay">回单</el-checkbox>
                  <el-checkbox v-model="noSignCheckCondition.IsCollectPaymentAmount">代收货款</el-checkbox>
                  <el-checkbox v-model="noSignCheckCondition.noSignIsError">异常</el-checkbox>
                  <el-checkbox v-model="noSignCheckCondition.noticeDeliveryStatus">等通知放货</el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
          </search-bar>
          <el-col :span="24" style="margin-bottom: 10px">
            <el-button type="primary" @click="SignOffaffirm" :disabled="notSignOffCurrentData===null">签收确认</el-button>
            <el-button type="primary" @click="paymentConfirmation" :disabled="notSignOffCurrentData===null">收款确认</el-button>
            <el-button type="primary" @click="addError" :disabled="notSignOffCurrentData===null">异常登记</el-button>
            <el-button type="primary" @click="noSignReset" style="float: right">重置</el-button>
            <el-button type="primary" @click="noSignQuery" style="float: right">查询</el-button>
          </el-col>
          <el-table :data="tableData" max-height="600"
                    ref="singleTable"
                    highlight-current-row
                    @current-change="handleNoArrivedSignCurrentChange"
                    border
                    v-loading="listLoading"
                    :row-class-name="tableRowClassNameToSignOff"
                    style="width: 100%;">
            <el-table-column
              label="选中"
              width="65">
              <template slot-scope="scope">
                <i class="el-icon-check"></i>
              </template>
            </el-table-column>
            <el-table-column prop="orderNumber" label="订单编号" width="150">
            </el-table-column>
            <el-table-column prop="orderCreateDate" label="下单日期" width="120">
            </el-table-column>
            <el-table-column prop="transportationTypeName" label="运输方式" width="100">
            </el-table-column>
            <el-table-column prop="paymentTypeName" label="结算方式" width="100">
            </el-table-column>
            <el-table-column label="运费金额" width="100">
              <template slot-scope="scope">
                <div>{{scope.row.freightPrice}}</div>
                <div>{{scope.row.payStatusName}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="collectPaymentAmount" label="代收货款" width="100" align="center">
              <template slot-scope="scope">
                <label>{{scope.row.collectPaymentAmount||'—'}}</label><br>
                <label v-if="scope.row.collectionDeliveryStatusName===102004001">待付款</label>
                <label v-if="scope.row.collectionDeliveryStatusName===102004002">已付款</label>
              </template>
            </el-table-column>
            <el-table-column label="等通知放货" width="120" align="center">
              <template slot-scope="scope">
                {{scope.row.noticeDeliveryStatus === 101022001?'否':(scope.row.noticeDeliveryStatus === 101022002? '是':scope.row.noticeDeliveryStatusName)}}
              </template>
            </el-table-column>
            <el-table-column prop="receiptWayName" label="回单" width="100" align="center">
              <template slot-scope="scope">
                {{scope.row.receiptWayName||'—'}}
              </template>
            </el-table-column>
            <el-table-column prop="sendContactName" label="货物信息">
              <template slot-scope="scope">
                {{scope.row.cargoNames}} | {{scope.row.amount}} 件
              </template>
            </el-table-column>
            <el-table-column prop="sendContactName" label="收货人" width="100">
            </el-table-column>
            <el-table-column prop="sendContactPhone" label="收货人手机" width="120">
            </el-table-column>
            <el-table-column prop="sendAddress" label="收货人地址" width="180">
            </el-table-column>
            <el-table-column label="异常累计" width="100">
              <template slot-scope="scope">
                {{scope.row.errorNum}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button v-if="scope.row.errorNum > 0" @click="showSignOffErrors(scope.row)" type="primary">异常记录</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--工具条-->
          <el-col :span="24" class="toolbar">
            <el-pagination
              :current-page="currentPage"
              :page-size="pageSize"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total,sizes,prev, pager, next, jumper"
              :total="total" style="float: right">
            </el-pagination>
          </el-col>
      </el-tab-pane>
      <el-tab-pane label="已到待签收" name="arrivedSignOff">
        <search-bar more-display>
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单编号">
                <el-input v-model="arrivedSignOffSearchCondition.LIKE_orderNumber" placeholder="请输入订单编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货人">
                <el-input v-model="arrivedSignOffSearchCondition.LIKE_sendContactName" placeholder="请输入收货人名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货人手机">
                <el-input v-model="arrivedSignOffSearchCondition.LIKE_sendContactPhone" placeholder="请输入收货人手机"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单日期">
                <el-date-picker
                  v-model="arrivedSignOffDaterange"
                  type="daterange"
                  placeholder="选择日期范围">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结算方式">
                <el-select v-model="arrivedSignOffSearchCondition.EQ_paymentType" placeholder="请选择">
                  <el-option
                    v-for="item in $store.getters.PAY_WAY"
                    :label="item.cnDictValname"
                    :key="item.dictVal"
                    :value="item.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输方式">
                <el-select v-model="arrivedSignOffSearchCondition.EQ_ageingType" placeholder="请选择">
                  <el-option
                    v-for="item in $store.getters.AGING_CLASSIFICATION"
                    :label="item.cnDictValname"
                    :key="item.dictVal"
                    :value="item.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item>
                <el-checkbox v-model="arrivedSignCheckCondition.IsReceiptWay">回单</el-checkbox>
                <el-checkbox v-model="arrivedSignCheckCondition.IsCollectPaymentAmount">代收货款</el-checkbox>
                <el-checkbox v-model="arrivedSignCheckCondition.noSignIsError">异常</el-checkbox>
                <el-checkbox v-model="arrivedSignCheckCondition.noticeDeliveryStatus">等通知放货</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </search-bar>
        <el-col :span="24" style="margin-bottom: 10px">
          <el-button type="primary" @click="arrivedSignOffAffirm" :disabled="selectedArrivedSignOff === null">签收确认</el-button>
          <el-button type="primary" @click="arrivedSignOffPaymentConfirmation" :disabled="selectedArrivedSignOff === null">收款确认</el-button>
          <el-button type="primary" @click="arrivedSignOffAddError" :disabled="selectedArrivedSignOff === null">异常登记</el-button>
          <el-button type="primary" @click="arrivedSignOffReset" style="float: right">重置</el-button>
          <el-button type="primary" @click="arrivedSignOffQuery" style="float: right">查询</el-button>
        </el-col>
        <el-table :data="arrivedSignOffTableData"
                  ref="arrivedSignOffTable"
                  highlight-current-row max-height="600"
                  @current-change="handleArrivedSignOffCurrentChange"
                  border
                  v-loading="arrivedSignOffListLoading"
                  :row-class-name="tableRowClassNameToSignOff"
                  style="width: 100%;">
          <el-table-column
            label="选中"
            width="65">
            <template slot-scope="scope">
              <i class="el-icon-check"></i>
            </template>
          </el-table-column>
          <el-table-column prop="orderNumber" label="订单编号" width="150">
          </el-table-column>
          <el-table-column prop="orderCreateDate" label="下单日期" width="120">
          </el-table-column>
          <el-table-column prop="transportationTypeName" label="运输方式" width="100">
          </el-table-column>
          <el-table-column prop="paymentTypeName" label="结算方式" width="100">
          </el-table-column>
          <el-table-column label="运费金额" width="100">
            <template slot-scope="scope">
              <div>{{scope.row.freightPrice}}</div>
              <div>{{scope.row.payStatusName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="collectPaymentAmount" label="代收货款" width="100" align="center">
            <template slot-scope="scope">
              <label>{{scope.row.collectPaymentAmount||'—'}}</label><br>
              <label v-if="scope.row.collectionDeliveryStatusName===102004001">待付款</label>
              <label v-if="scope.row.collectionDeliveryStatusName===102004002">已付款</label>
            </template>
          </el-table-column>
          <el-table-column label="等通知放货" width="120" align="center">
            <template slot-scope="scope">
              {{scope.row.noticeDeliveryStatus === 101022001?'否':(scope.row.noticeDeliveryStatus === 101022002? '是':scope.row.noticeDeliveryStatusName)}}
            </template>
          </el-table-column>
          <el-table-column prop="receiptWayName" label="回单" width="100" align="center">
            <template slot-scope="scope">
              {{scope.row.receiptWayName||'—'}}
            </template>
          </el-table-column>
          <el-table-column prop="sendContactName" label="货物信息">
            <template slot-scope="scope">
              {{scope.row.cargoNames}} | {{scope.row.amount}} 件
            </template>
          </el-table-column>
          <el-table-column prop="sendContactName" label="收货人" width="100">
          </el-table-column>
          <el-table-column prop="sendContactPhone" label="收货人手机" width="120">
          </el-table-column>
          <el-table-column prop="sendAddress" label="收货人地址" width="180">
          </el-table-column>
          <el-table-column label="异常累计" width="100">
            <template slot-scope="scope">
              {{scope.row.errorNum}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button v-if="scope.row.errorNum > 0" @click="showSignOffErrors(scope.row)" type="primary">异常记录</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <el-pagination
            :current-page="arrivedSignOffCurrentPage"
            :page-size="arrivedSignOffPageSize"
            @size-change="handleArrivedSignOffSizeChange"
            @current-change="handleArrivedSignOffCurrentPageChange"
            layout="total,sizes,prev, pager, next, jumper"
            :total="arrivedSignOffTotal" style="float: right">
          </el-pagination>
        </el-col>
      </el-tab-pane>
      <el-tab-pane label="已签收" name="SignOff">
        <!--工具条-->
        <search-bar more-display>
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单编号">
                <el-input v-model="signSearchCondition.LIKE_orderNumber" placeholder="请输入订单编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货人">
                <el-input v-model="signSearchCondition.LIKE_sendContactName" placeholder="请输入收货人名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收货人手机">
                <el-input v-model="signSearchCondition.LIKE_sendContactPhone" placeholder="请输入收货人手机"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单日期">
                <el-date-picker
                  v-model="signDaterange"
                  type="daterange"
                  placeholder="选择日期范围">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="结算方式">
                <el-select v-model="signSearchCondition.EQ_paymentType" placeholder="请选择">
                  <el-option
                    v-for="item in $store.getters.PAY_WAY"
                    :label="item.cnDictValname"
                    :key="item.dictVal"
                    :value="item.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输方式">
                <el-select v-model="signSearchCondition.EQ_ageingType" placeholder="请选择">
                  <el-option
                    v-for="item in $store.getters.AGING_CLASSIFICATION"
                    :label="item.cnDictValname"
                    :key="item.dictVal"
                    :value="item.dictVal">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item>
                <el-checkbox v-model="signCheckCondition.IsReceiptWay">回单</el-checkbox>
                <el-checkbox v-model="signCheckCondition.IsCollectPaymentAmount">代收货款</el-checkbox>
                <el-checkbox v-model="signCheckCondition.noSignIsError">异常</el-checkbox>
                <el-checkbox v-model="signCheckCondition.noticeDeliveryStatus">等通知放货</el-checkbox>
              </el-form-item>
            </el-col>
          </el-row>
        </search-bar>
        <!-- 操作 -->
        <el-col :span="24" style="margin-bottom: 10px">
          <el-button type="primary">导出</el-button>
          <el-button type="primary" @click="cancelSignOff" :disabled="signOffCurrentData == null">取消签收</el-button>
          <el-button type="primary" @click="signPaymentConfirmation" :disabled="signOffCurrentData === null">收款确认</el-button>
          <el-button type="primary" @click="signReset" style="float: right">重置</el-button>
          <el-button type="primary" @click="signQuery" style="float: right">查询</el-button>
        </el-col>

        <el-table ref="signOffSingleTable"
                  :data="signOfftableData"
                  highlight-current-row
                  border max-height="600"
                  @current-change="handleSignOfftableDataCurrentChange"
                  :row-class-name="tableRowClassName"
                  v-loading="signListLoading"
                  style="width: 100%;">
          <el-table-column
            label="选中"
            width="65">
            <template slot-scope="scope">
              <i class="el-icon-check"></i>
            </template>
          </el-table-column>
          <el-table-column prop="orderNumber" label="订单编号" width="150">
          </el-table-column>
          <el-table-column prop="orderCreateDate" label="下单日期" width="120">
          </el-table-column>
          <el-table-column prop="transportationTypeName" label="运输方式" width="100">
          </el-table-column>
          <el-table-column prop="paymentTypeName" label="结算方式" width="100">
          </el-table-column>
          <el-table-column label="运费金额" width="100">
            <template slot-scope="scope">
              <div>{{scope.row.freightPrice}}</div>
              <div>{{scope.row.payStatusName}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="collectPaymentAmount" label="代收货款" width="100" align="center">
            <template slot-scope="scope">
              <label>{{scope.row.collectPaymentAmount||'—'}}</label><br>
              <label v-if="scope.row.collectionDeliveryStatusName===102004001">待付款</label>
              <label v-if="scope.row.collectionDeliveryStatusName===102004002">已付款</label>
            </template>
          </el-table-column>
          <el-table-column label="等通知放货" width="120" align="center">
            <template slot-scope="scope">
              {{scope.row.noticeDeliveryStatus === 101022001?'否':(scope.row.noticeDeliveryStatus === 101022002? '是':scope.row.noticeDeliveryStatusName)}}
            </template>
          </el-table-column>
          <el-table-column prop="receiptWayName" label="回单" width="100" align="center">
            <template slot-scope="scope">
              {{scope.row.receiptWayName||'—'}}
            </template>
          </el-table-column>
          <el-table-column prop="sendContactName" label="货物信息" width="100">
            <template slot-scope="scope">
              {{scope.row.cargoNames}} | {{scope.row.amount}} 件
            </template>
          </el-table-column>
          <el-table-column prop="signOffDate" label="签收日期" width="180">
          </el-table-column>
          <el-table-column label="签收人" width="200">
            <template slot-scope="scope">
              <div v-if="!scope.row.mSignOffTaskModel || (!scope.row.mSignOffTaskModel.signOffName && !scope.row.mSignOffTaskModel.signOffIdentityCard) ">
                —
              </div>
              <div v-else>
                <div>{{scope.row.mSignOffTaskModel.signOffName}}</div>
                <div>{{scope.row.mSignOffTaskModel.signOffIdentityCard}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="代签人" width="200">
            <template slot-scope="scope">
              <div v-if="!scope.row.mSignOffTaskModel || (!scope.row.mSignOffTaskModel.receiverName && !scope.row.mSignOffTaskModel.receiverIDNumber)">
                —
              </div>
              <div v-else>
                <div>{{scope.row.mSignOffTaskModel.receiverName}}</div>
                <div>{{scope.row.mSignOffTaskModel.receiverIDNumber}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="异常签收情况" min-width="200">
            <template slot-scope="scope">
              <div v-if="!scope.row.mSignOffTaskModel || (!scope.row.mSignOffTaskModel.signOffAbnormalName && !scope.row.mSignOffTaskModel.abnormalExplain)">
                —
              </div>
              <div v-else>
                <div>{{scope.row.mSignOffTaskModel.signOffAbnormalName}}</div>
                <div>{{scope.row.mSignOffTaskModel.abnormalExplain}}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="异常累计" width="100">
            <template slot-scope="scope">
              {{scope.row.errorNum}}
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="200" fixed="right">
            <template slot-scope="scope">
              <el-button v-if="scope.row.errorNum > 0" @click="showSignOffErrors(scope.row)" type="primary">异常记录</el-button>
              <el-button :plain="true" type="info"
                         @click="examinePicture(scope.$index, scope.row)">单据记录
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
          <el-pagination
            :current-page="signCurrentPage"
            :page-size="signPageSize"
            @size-change="handleSignSizeChange"
            @current-change="handleSignCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :total="signTotal" style="float: right">
          </el-pagination>
        </el-col>
      </el-tab-pane>
      <!--以上为签收-->
    </el-tabs>
    <!-- 签收 取消  弹窗 -->
    <el-dialog :title="canceldialogTitle" size="tiny" :visible.sync="cancelSignOffTaskVisible"
               :close-on-click-modal="false">
      <el-form :model="cancelSignOffTask" :rules="rule1" label-width="120px" ref="cancelSignOffTask">
        <el-form-item prop="cancelCause"  label="取消原因">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 10}"
            class="dialog-form-content"
            placeholder="请输入内容"
            v-model="cancelSignOffTask.cancelCause">
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="cancelSignOffTaskVisible = false">取消</el-button>
        <el-button type="primary" @click.native="cancelSignOffCause" :loading="submitLoading">提交

        </el-button>
      </div>
    </el-dialog>
    <!--签收查看图片  弹窗-->
    <el-dialog title="单据记录" :visible.sync="singedImgUrlVisiable" size="tiny" style="width: 2000px">
      <div>
        <el-form :model="addImgForm" ref="addImgForm">
          <el-form-item label="单据上传" >
            <el-upload
              style="margin-left: 70px"
              action="/api/v2.0/admin/sign_off_test"
              list-type="picture-card"
              :on-success="handlePreview"
              :before-upload="beforeAvatarUpload"
              :on-preview="handlePictureCardPreview"
              :file-list="fileList"
              :on-remove="handleRemove">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item style="margin-left: 70px">请上传有效费用单据图片，如客户货运单，联盟速运托运单，中转托运单等<br>图片最多不超过5张，只支持JPG/PNG图片格式，图片大小不大于2M</el-form-item>
          <el-form-item style="margin-left: 70px">
            <el-button :plain="true" type="info" @click="cancleAddImg">取消</el-button>
            <el-button type="primary" @click="handleAddImg" :loading="addImgButton">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <template v-for="(item,index) in SignOffPictcure">
          <i :key="index">
            <img width="100" height="100" v-bind:src="item.signOffPicture" @click="clickImg($event)">&nbsp;
          </i>

        </template>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="showImg">
      <img @click="viewImg" :src="imgSrc" width="100%" height="100%"/>
    </el-dialog>
    <el-dialog :visible.sync="singedImgdialogVisible" size="tiny">   <!-- 图片点击放大 -->
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <sign-off-confirm ref="noArrivedSignOffConfirm" :handleSignOffConfirm="noSignOffConfirmSuccess"></sign-off-confirm>
    <sign-off-confirm ref="arrivedSignOffConfirm" :handleSignOffConfirm="arrivedSignOffConfirmSuccess"></sign-off-confirm>
    <sign-off-error ref="noArrivedSignOffError" :handleAddError="noArrivedHandleAddError"></sign-off-error>
    <sign-off-error ref="arrivedSignOffError" :handleAddError="arrivedHandleAddError"></sign-off-error>
    <sign-off-payment-confirm ref="arrivedSignOffPaymentConfirm"></sign-off-payment-confirm>
    <sign-off-payment-confirm ref="noArrivedSignOffPaymentConfirm"></sign-off-payment-confirm>
    <sign-off-payment-confirm ref="signPaymentConfirm"></sign-off-payment-confirm>
    <sign-off-error-record ref="signOffErrorRecord"></sign-off-error-record>
  </div>
</template>
<script>
import { getMemberUsers, searchDictEntitys } from '../../api/customer/maintain.js';
import {
  saveSignOffPictures,
  cancelSignOffTasks,
  getSignOffPicture,
  getSignOffPage,
  addSignOffError,
  saveSignOffTasks,
  getAgeingWarningStatic
} from '../../api/stowage/SingIn.js';
import { isEmpty } from '../../lib/util';
import SignOffConfirm from './SignOffConfirm.vue';
import SignOffError from './SignOffError.vue';
import SignOffPaymentConfirm from './SignOffPaymentConfirm.vue';
import SignOffErrorRecord from './SignOffErrorRecord.vue';
export default {
  components: {
    SignOffPaymentConfirm,
    SignOffConfirm,
    SignOffError,
    SignOffErrorRecord
  },
  data () {
    return {
      ageingDisplay: {
        display: 'none'
      },
      topWarningNum: 0,
      noSignDaterange: [],
      arrivedSignOffDaterange: [],
      signDaterange: [],
      noSignCheckCondition: {
        IsReceiptWay: false,
        IsCollectPaymentAmount: false,
        noSignIsError: false,
        noticeDeliveryStatus: false
      },
      arrivedSignCheckCondition: {
        IsReceiptWay: false,
        IsCollectPaymentAmount: false,
        noSignIsError: false,
        noticeDeliveryStatus: false
      },
      signCheckCondition: {
        IsReceiptWay: false,
        IsCollectPaymentAmount: false,
        noSignIsError: false,
        noticeDeliveryStatus: false
      },
      stopPayWeChat: '',
      mySignOffDate: '',
      pictureTest: '',
      dialogImageUrl: '',
      dialogVisible: false,
      SignOffPictcure: [], // 签收 查看地址
      pcctureVisible: false, // 查看地址
      searchBarCreateDate3: '', // 签收日期
      notSignOffAbnormal: '', //  已签收--签收异常
      notSignOffreceipt: '', // 已签收  --回单
      cancelCause: '',
      cancelSignOffId: null, // 签收--取消签收的ID
      cancelSignOffTaskVisible: false,
      signOfftableData: [], // 签收的表格
      SignOffExpress: '', // 签收--签收异常
      receipt: '', // 签收--回单
      memberUsers: [], // 签收--会员数组
      memberUserId: '', // 签收--会员名称
      SignOffMemberUserId: '', // 会员名称
      collectionOnDelivery: '', // 签收--代收货款
      notSingInDays: '', // 签收--未签天数
      orderId: '', // 签收--订单编号
      sendContactName: '', // 签收--收货人名称
      shipmentsContactName: '', // 签收--发货人名称
      payWayValue: '', // 签收--结算方式
      payWay: [], // 签收--结算方式数组
      payWays: '', // 签收--结算方式vmodel
      transportation: [], // 签收--运输方式数组
      transportations: '', // 签收--运输方式
      transportationValue: '', // 签收--运输方式
      // -------------------------------以上为签收----------------------------------------------
      // -------------------------------以下为未签收----------------------------------------------
      notSignOffCompareDay: '', // 未签收
      test11: '',
      notSignOffCurrentData: null, // 未签收 时当前选 中行的数组
      SignOffTaskVisible: false,
      listLoading: false,
      notSignOffMemberUsers: [], // 签收--会员数组
      signOffAbnormalValue: '', // 签收异常显示值
      tableData: [],
      total: 0,
      signTotal: 0,
      currentPage: 1,
      signCurrentPage: 1,
      pageSize: 10,
      signPageSize: 10,
      signListLoading: false,
      sortProp: null,
      sortProp1: null,
      sortOrder: 'ascending',
      sortOrder1: 'ascending',
      submitLoading: false,
      pictureTitle: '查看图片',
      condition: {
        name: '',
        number: ''
      },
      canceldialogTitle: '取消签收',
      singedImgUrlVisiable: null,
      singedImgdialogVisible: false, // 查看单张图片放大
      selectedRow: null,
      addImgButton: false,
      addImgForm: {},
      fileList: [],
      imgSrc: '',
      showImg: false,

      // 签收图片
      MSignOffPicture: {
        'id': null,
        'orderId': null,
        'orderNumber': null,
        'freightNumber': null,
        'signOffPicture': null,
        'mSignOff': null
      },
      rule1: {
        cancelCause: [
          {required: true, message: '请输入取消原因', trigger: 'blur'},
          {min: 2, max: 60, message: '长度在2 到 60 个字符', trigger: 'blur'}
        ]
      },
      // 签收任务
      cancelSignOffTask: {
        'id': null,
        'memberUserId': null,
        'signOffId': null,
        'orderId': null,
        'orderNumber': null,
        'freightNumber': null,
        'signOffStatus': null,
        'signOffName': null,
        'signOffIdentityCard': null,
        'signOffDate': null,
        'isAbnormal': null,
        'signOffAbnormal': null,
        'abnormalExplain': null,
        'remark': null,
        'cancelName': null,
        'cancelCause': null,
        'cancelDate': null,
        'stowageCoreId': null,
        'stowageCore': null,
        'signOff': null,
        'pictureId': null,
        'signOffTaskReceiptWay': null,
        'receiptStatus': null
      },
      SignOffTabs: 'arrivedSignOff',
      noSignSearchCondition: {
        'LIKE_order.memberUserName': null,
        GT_orderCreateDate: null,
        LT_orderCreateDate: null,
        LIKE_orderNumber: null,
        LIKE_sendContactName: null,
        LIKE_sendContactPhone: null,
        EQ_paymentType: null,
        EQ_ageingType: null,
        LIKE_shipmentsContactName: null
      },
      arrivedSignOffSearchCondition: {
        'LIKE_order.memberUserName': null,
        GT_orderCreateDate: null,
        LT_orderCreateDate: null,
        LIKE_orderNumber: null,
        LIKE_sendContactName: null,
        LIKE_sendContactPhone: null,
        EQ_paymentType: null,
        EQ_ageingType: null,
        LIKE_shipmentsContactName: null
      },
      signSearchCondition: {
        'LIKE_order.memberUserName': null,
        GT_orderCreateDate: null,
        LT_orderCreateDate: null,
        LIKE_orderNumber: null,
        LIKE_sendContactName: null,
        LIKE_sendContactPhone: null,
        EQ_paymentType: null,
        EQ_ageingType: null,
        LIKE_shipmentsContactName: null
      },
      errorSignOff: {
        orderNumber: null,
        signOffErrors: []
      },
      errorSignOffDialogVisible: false,
      arrivedSignOffTableData: [],
      arrivedSignOffListLoading: false,
      arrivedSignOffCurrentPage: 1,
      arrivedSignOffPageSize: 10,
      arrivedSignOffTotal: 0,
      selectedArrivedSignOff: null,
      signOffCurrentData: null
    };
  },
  watch: {
    noSignDaterange (val) {
      if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
        this.noSignSearchCondition.GT_orderCreateDate = val[0].toJSON();
        this.noSignSearchCondition.LT_orderCreateDate = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.noSignSearchCondition.GT_orderCreateDate = null;
        this.noSignSearchCondition.LT_orderCreateDate = null;
      }
    },
    arrivedSignOffDaterange (val) {
      if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
        this.arrivedSignOffSearchCondition.GT_orderCreateDate = val[0].toJSON();
        this.arrivedSignOffSearchCondition.LT_orderCreateDate = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.arrivedSignOffSearchCondition.GT_orderCreateDate = null;
        this.arrivedSignOffSearchCondition.LT_orderCreateDate = null;
      }
    },
    signDaterange (val) {
      if (val && val.length > 0 && val[0] !== null && val[1] !== null) {
        this.signSearchCondition.GT_orderCreateDate = val[0].toJSON();
        this.signSearchCondition.LT_orderCreateDate = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.signSearchCondition.GT_orderCreateDate = null;
        this.signSearchCondition.LT_orderCreateDate = null;
      }
    }
  },
  methods: {
    tabClick (e) {
      if (e.name === 'SignOff') {
        this.signQuery();
      }
    },
    noArrivedHandleAddError (form) {
      addSignOffError(this.notSignOffCurrentData.orderId, form).then(res => {
        if (res.data.successFlg) {
          this.$message('异常登记成功！');
          this.$refs.noArrivedSignOffError.hide();
          this.loadNotSign('');
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    arrivedHandleAddError (form) {
      addSignOffError(this.selectedArrivedSignOff.orderId, form).then(res => {
        if (res.data.successFlg) {
          this.$message('异常登记成功！');
          this.$refs.arrivedSignOffError.hide();
          this.loadArrivedSignOff('');
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    arrivedSignOffConfirmSuccess (form) {
      saveSignOffTasks(this.selectedArrivedSignOff.id, form).then((res) => {
        this.submitLoading = false;
        if (res.data.successFlg === true) {
          this.$message.success('保存/修改成功！');
          this.$refs.arrivedSignOffConfirm.hide();
          this.arrivedSignOffQuery();
          this.signQuery();
          this.getAgeingWarningStatic('');
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    noSignOffConfirmSuccess (form) {
      saveSignOffTasks(this.notSignOffCurrentData.id, form).then((res) => {
        this.submitLoading = false;
        if (res.data.successFlg === true) {
          this.$message.success('保存/修改成功！');
          this.$refs.noArrivedSignOffConfirm.hide();
          this.noSignQuery();
          this.signQuery();
          this.getAgeingWarningStatic('');
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    arrivedSignOffReset () {
      this.arrivedSignOffDaterange = [];
      this.$ue.resetObjNull(this.arrivedSignOffSearchCondition);
      this.resetCheckFilters(this.arrivedSignCheckCondition);
    },
    arrivedSignOffQuery () {
      let filters = this.$ue.objToFilter(this.arrivedSignOffSearchCondition);
      filters += this.getCheckFilters(this.arrivedSignCheckCondition);
      this.loadArrivedSignOff(filters);
    },
    arrivedSignOffAddError () {
      this.$refs.arrivedSignOffError.show(this.selectedArrivedSignOff);
    },
    arrivedSignOffPaymentConfirmation () {
      this.$refs.noArrivedSignOffPaymentConfirm.show(this.selectedArrivedSignOff);
    },
    arrivedSignOffAffirm () {
      let o = this.selectedArrivedSignOff;
      this.$refs.arrivedSignOffConfirm.show(o.paymentType, o.collectPaymentAmount, o.payStatus, o.receiptWay);
    },
    handleArrivedSignOffCurrentChange (val) {
      this.selectedArrivedSignOff = val;
    },
    handleArrivedSignOffSizeChange (val) {
      this.arrivedSignOffPageSize = val;
      this.arrivedSignOffQuery();
    },
    handleArrivedSignOffCurrentPageChange (val) {
      this.arrivedSignOffCurrentPage = val;
      this.arrivedSignOffQuery();
    },
    tableRowClassName (row, index) {
      return row.errorNum > 0 ? 'info-row' : '';
    },
    tableRowClassNameToSignOff (row, index) {
      if (row.errorNum > 0) {
        return 'info-row';
      }
      if (row.ageingWarning) {
        return 'info-row-ageing';
      }
      return '';
    },
    showSignOffErrors (row) {
      this.$refs.signOffErrorRecord.show(row.orderNumber, row.errorNum, row.signOffErrors);
    },
    addError () {
      this.$refs.noArrivedSignOffError.show(this.notSignOffCurrentData);
    },
    handleSignOfftableDataCurrentChange (val) {
      this.signOffCurrentData = val;
      if (val) {
        this.cancelSignOffId = val.id;
      } else {
        this.cancelSignOffId = null;
      }
    },
    signQuery () {
      let filters = this.$ue.objToFilter(this.signSearchCondition);
      filters += this.getCheckFilters(this.signCheckCondition);
      this.loadSign(filters);
    },
    signReset () {
      this.signDaterange = [];
      this.resetCheckFilters(this.signCheckCondition);
      this.$ue.resetObjNull(this.signSearchCondition);
    },
    getCheckFilters: function (o) {
      let filters = '';
      if (o.noSignIsError) {
        filters += ';GT_errorNum=0;';
      }
      if (o.IsCollectPaymentAmount) {
        filters += ';ISNOTNULL_collectPaymentAmount;';
      }
      if (o.IsReceiptWay) {
        filters += ';ISNOTNULL_receiptWay;';
      }
      if (o.noticeDeliveryStatus) {
        filters += ';NOTEQ_noticeDeliveryStatus=101022001;';
      }
      return filters;
    },
    resetCheckFilters: function (o) {
      o.IsReceiptWay = false;
      o.IsCollectPaymentAmount = false;
      o.noSignIsError = false;
      o.noticeDeliveryStatus = false;
    },
    noSignQuery () {
      let filters = this.$ue.objToFilter(this.noSignSearchCondition);
      filters += this.getCheckFilters(this.noSignCheckCondition);
      this.loadNotSign(filters);
    },
    noSignReset () {
      this.noSignDaterange = [];
      this.resetCheckFilters(this.noSignCheckCondition);
      this.$ue.resetObjNull(this.noSignSearchCondition);
    },
    reload () {
      this.loadNotSign('');
      this.loadSign('');
      this.loadArrivedSignOff('');
      this.getAgeingWarningStatic('');
    },
    paymentConfirmation () {
      this.$refs.noArrivedSignOffPaymentConfirm.show(this.notSignOffCurrentData);
    },
    signPaymentConfirmation () {
      this.$refs.signPaymentConfirm.show(this.signOffCurrentData);
    },
    // 查看图片
    examinePicture (index, row) {
      this.fileList = [];
      this.SignOffPictcure = [];
      this.selectedRow = row;
      this.singedImgUrlVisiable = true;
      getSignOffPicture(row.id).then((res) => {
        if (res.data.successFlg === true) {
          if (res.data.detailModelList.length > 0) {
            this.SignOffPictcure = res.data.detailModelList;
          } else {
            this.$message({
              message: '该订单暂无单据记录！',
              type: 'warning'
            });
          }
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    // 上传图片
    handleAddImg () {
      if ((this.SignOffPictcure.length + this.fileList.length) > 5) {
        this.$message({
          message: '图片总数大于5张！',
          type: 'error'
        });
      } else if (this.fileList.length < 1) {
        this.$message({
          message: '请选择一张图片！',
          type: 'warning'
        });
      } else {
        this.addImgButton = true;
        saveSignOffPictures(this.selectedRow.id, this.fileList.join(',')).then((res) => {
          this.submitLoading = false;
          if (res.data.successFlg === true) {
            this.addImgButton = false;
            this.$message.success('保存/修改成功！');
            this.singedImgUrlVisiable = false;
          } else {
            this.$message.error(res.data.errorMsg);
          }
        }).catch(function (error) {
          console.log(error);
        });
      }
    },
    handleRemove (file, fileList) {
      this.fileList.pop(file);
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = false;
      this.singedImgdialogVisible = true;
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 和 png格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handlePreview (file) {
      this.fileList.push(file.obj);
    },
    clickImg (e) {
      this.showImg = true;
      this.imgSrc = e.currentTarget.src;
    },
    viewImg () {
      this.showImg = false;
    },
    cancleAddImg () {
      this.$confirm('确定取消图片上传？', '提示', {
        type: 'warning'
      }).then(() => {
        this.singedImgUrlVisiable = false;
      });
    },
    submitUpload () {
      this.$refs.upload.submit();
    },
    // 取消签收的提交方法
    cancelSignOffCause () {
      this.$refs['cancelSignOffTask'].validate((valid) => {
        if (valid) {
          this.cancelSignOffTask.signOffId = this.cancelSignOffId;
          cancelSignOffTasks({id: this.cancelSignOffTask.signOffId, cancelCause: this.cancelSignOffTask.cancelCause}).then((res) => {
            if (res.data.successFlg === true) {
              this.$message.success('保存/修改成功！');
              this.cancelSignOffTaskVisible = false;
              this.reload();
            } else {
              this.$message.error(res.data.errorMsg);
            }
          }).catch(function (error) {
            console.log(error);
          });
        }
      });
    },
    // 弹出取消签收
    cancelSignOff () {
      if (isEmpty(this.cancelSignOffId)) {
        return this.$message.error('请选择数据！');
      }
      this.cancelSignOffTask.cancelCause = '';
      this.canceldialogTitle = '取消签收';
      this.cancelSignOffTaskVisible = true;
    },
    handleNoArrivedSignCurrentChange (val) {
      this.notSignOffCurrentData = val;
    },
    handleSizeChange (val) {
      this.pageSize = val;
      this.noSignQuery();
    },
    handleCurrentChange (val) {
      this.currentPage = val;
      this.noSignQuery();
    },
    handleSignSizeChange (val) {
      this.signPageSize = val;
      this.signQuery();
    },
    handleSignCurrentChange (val) {
      this.signCurrentPage = val;
      this.signQuery();
    },

    // 重置查询条件
    resetCondition () {
      for (let p in this.condition) {
        this.condition[p] = null;
      }
    },
    // 键
    SignOffaffirm () {
      let o = this.notSignOffCurrentData;
      this.$refs.noArrivedSignOffConfirm.show(o.paymentType, o.collectPaymentAmount, o.payStatus, o.receiptWay);
    },
    // 搜索会员名称
    searchMemberUsers () {
      getMemberUsers({
        token: this.token,
        filters: 'status=111002001',
        sorts: '',
        size: '8',
        page: '1'
      }).then((res) => {
        this.notSignOffMemberUsers = res.data.detailModelList;
        this.memberUsers = res.data.detailModelList;
      });
    },

    // 搜索结算方式
    searchDictEntitys (id) {
      searchDictEntitys(id).then((res) => {
        if (res.data.detailModelList !== '' && res.data.detailModelList !== null) {
          this.payWay = res.data.detailModelList;
        }
      });
    },
    // 搜索运输方式方式
    transportationWay (id) {
      searchDictEntitys(id).then((res) => {
        if (res.data.detailModelList !== '' && res.data.detailModelList !== null) {
          this.transportation = res.data.detailModelList;
        }
      });
    },
    loadSign (filters) {
      this.signListLoading = true;
      this.loadSignOffPage('EQ_signOffStatus=101009002;NOTIN_order.trunkTasks.nextOrganizationExecuteTypeId=105001002,112012004;' + filters, this.signCurrentPage, this.signPageSize, result => {
        this.signOfftableData = result.detailModelList;
        this.signTotal = result.totalCount;
        this.signListLoading = false;
      });
    },
    loadArrivedSignOff (filters) {
      this.arrivedSignOffListLoading = true;
      this.loadSignOffPage('EQ_order.isArrived=true;EQ_signOffStatus=101009001;NOTEQ_order.trunkTasks.nextOrganizationExecuteTypeId=105001002;' + filters, this.arrivedSignOffCurrentPage, this.arrivedSignOffPageSize, result => {
        this.arrivedSignOffTableData = result.detailModelList;
        this.arrivedSignOffTotal = result.totalCount;
        this.arrivedSignOffListLoading = false;
      });
    },
    // 未签收告警
    getAgeingWarningStatic (filters) {
      let newFilters = 'EQ_signOffStatus=101009001;NOTEQ_order.trunkTasks.nextOrganizationExecuteTypeId=105001002;' + filters;
      getAgeingWarningStatic({filters: newFilters}).then(result => {
        if (result.data.successFlg) {
          if (result.data.obj > 0) {
            this.ageingDisplay.display = 'block';
            this.topWarningNum = result.data.obj;
          } else {
            this.topWarningNum = 0;
            this.ageingDisplay.display = 'none';
          }
        } else {
          this.$message.error(result.data.errorMsg);
        };
      });
    },
    loadNotSign (filters) {
      this.listLoading = true;
      this.loadSignOffPage('EQ_order.isArrived=false;EQ_signOffStatus=101009001;NOTEQ_order.trunkTasks.nextOrganizationExecuteTypeId=105001002;' + filters, this.currentPage, this.pageSize, result => {
        this.tableData = result.detailModelList;
        this.total = result.totalCount;
        this.listLoading = false;
      });
    },
    loadSignOffPage (filters, page, size, fn) {
      getSignOffPage({
        filters: filters,
        sorts: '-orderCreateDate',
        page: page,
        size: size
      }).then(res => {
        if (res.data.successFlg) {
          fn(res.data);
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    }
  },
  mounted () {
    this.$store.commit('initDict');
    this.loadNotSign('');
    this.loadSign('');
    this.loadArrivedSignOff('');
    this.getAgeingWarningStatic('');
  }
};
</script>
